<template>
    <!-- html -->
    <div class="SmCycle">
        <h3>this is SmCycle.</h3>
        <h4>当前求和为：{{sum}}</h4>>
        <button @click="add">添加值</button>
    </div>
</template>

<!-- npm i vite-plugin-vue-setup-extend -D -->
<script lang="ts" setup name='SmCycle'>
//vue2 生命周期
import { onBeforeMount, onBeforeUnmount, onBeforeUpdate, onMounted, onUnmounted, onUpdated, ref } from 'vue'

//数据
let sum = ref(0)
//方法 
function add() {
    sum.value += 1
}

//创建
console.log("创建")

//挂在前
onBeforeMount(() =>{
    console.log("子-挂在前")
})

//挂在完毕
onMounted(()=>{
    console.log("子-挂在完毕")
})

//更新前
onBeforeUpdate(()=>{
    console.log("更新前")
})

//更新后
onUpdated(()=>{
    console.log("更新后")
})

//销毁前(卸载前)
onBeforeUnmount(()=>{
    console.log("卸载前")
})

//销毁后（卸载后）
onUnmounted(()=>{
    console.log("卸载后")
})

</script>

<script lang="ts">
// vue 2 生命周期

// js或者ts
// export default {
//     name: 'Person',  //组件名

//     //vue2 写法 选项式（配置项）api
//     //数据
//     data() {
//         //console.log("this is person")
//         return {
//             // name: '张三',
//             // age: 18,
//             // tel: '1388888888888'
//             a: 500,
//             b: this.name
//         }
//     },
//     //函数 初始化：生命周期、事件、但数据代理还未开始 
//     // beforeCreate() {
//     //     //debugger;  //断点
//     // },
//     //初始化：数据监测、数据代理  函数 
//     created() {

//     },
//     //函数  此时页面呈现的是未经vue编译的dom结构
//     beforeMount() {
//         console.log("beforeMount")
//         //debugger;
//     },
//     //vue完成模板的解析 并把初始的真实Dom元素放入页面后（挂载完成）调用mounte构d方法  此时页面呈现的是vue编译的dom结
//     mounted() {
//         console.log("beforeMount")
//         //debugger;
//     },
//     beforeUpdate() {  //此时数据是心得，页面是旧的，页面尚未和数据保持同步
//         console.log("beforeUpdate");
//         console.log("update变了");
//         //debugger;
//     },
//     updated() {      //此时数据是新的，页面也是新的，页面和数据保持同步
//         console.log("updated");
//         //debugger;
//     },
//     //此时vm中 所有的实列 data   methods 指令 都处于可用状态
//     beforeDestroy() {
//         // debugger;
//     },
//     //Vue实例的所有指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁。
//     destroyed() {
//         // debugger;
//     },
//     //检测属性
//     watch: {

//     },
//     //计算属性
//     computed: {
//     },
//     //方法
//     methods: {
//         // showtel() {
//         //     console.log(this.tel)
//         // },
//         // updateAge() {
//         //     this.name = this.name + 1
//         // },
//         // updateName() {
//         //     this.age = this.age + 1
//         // }

//         showOld() {
//             console.log("测试老语法")
//             // this.showtel()
//         }
//     },

//     //vue3 组合式Api开发
//     //vue3中 已经弱化 this 了

//     //vue2和vue3写法可以共存 vue2的data可以访问setup的数据 ，但是setup不能访问 vue2 中data的数据，
//     // 因为setup最早的生命周期，在 beforeCreate（生命周期、事件、但数据代理还未开始 ） 之前

//     //函数 初始化：生命周期、事件、但数据代理还未开始 
//     beforeCreate() {
//         //debugger;  //断点
//     },
//     //最早的生命周期 , 在 beforeCreate 之前
//     setup() {
//         let name = '张三'
//         let age = 18
//         let tel = '1388888888888'

//         function showtel() {
//             console.log(tel)
//         }
//         function updateAge() {
//             name = name + 1
//         }
//         function updateName() {
//             age = age + 1
//         }

//         return { name, age, showtel, updateAge, updateName }

//         //函数方法返回渲染
//         //return () => '哈哈'
//     }
// }
</script>

<style scoped>
/* 样式 */
.SmCycle {
    background-color: skyblue;
    border-radius: 10px;
    padding: 20px;
}
</style>